<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>集团火电机组冷端优化系统 - 个人信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-bg: #0f172a;
            --secondary-bg: #1e293b;
            --card-bg: #1a2435;
            --accent: #5eead4;
            --accent-hover: #88f3e2;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-tertiary: #64748b;
            --border-color: #334155;
            --success: #4ade80;
            --error: #f87171;
            --font-main: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --radius-sm: 4px;
            --radius-md: 8px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            font-family: var(--font-main);
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(30, 41, 59, 0.6) 0%, transparent 25%),
                radial-gradient(circle at 90% 80%, rgba(94, 234, 212, 0.08) 0%, transparent 25%);
            overflow-x: hidden;
        }
        
        /* 科技背景装饰 */
        .tech-pattern {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0.03;
            background-image: 
                linear-gradient(rgba(94, 234, 212, 0.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(94, 234, 212, 0.5) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -1;
        }
        
        /* 流动线条特效 */
        .flow-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            pointer-events: none;
        }
        
        .flow-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            opacity: 0.1;
            animation: flow 15s infinite linear;
        }
        
        @keyframes flow {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100vw); }
        }
        
        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-md) var(--spacing-xl);
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(5px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .logo-icon {
            width: 36px;
            height: 36px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-bg);
            font-size: 1.2rem;
        }
        
        .logo-text {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .nav-links {
            display: flex;
            gap: var(--spacing-md);
        }
        
        .nav-item {
            position: relative;
            padding: var(--spacing-sm) var(--spacing-md);
            cursor: pointer;
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .nav-link.active {
            color: var(--accent);
        }
        
        .nav-link:hover {
            color: var(--accent);
        }
        
        .nav-submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            min-width: 180px;
            z-index: 10;
            padding: var(--spacing-sm) 0;
        }
        
        .nav-submenu a {
            display: block;
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .nav-submenu a:hover {
            background: rgba(94, 234, 212, 0.1);
            color: var(--accent);
        }
        
        .nav-item:hover .nav-submenu {
            display: block;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            position: relative;
            cursor: pointer;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--secondary-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-name {
            font-weight: 500;
        }
        
        .user-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            min-width: 200px;
            z-index: 100;
            padding: var(--spacing-sm) 0;
        }
        
        .user-menu.active {
            display: block;
        }
        
        .user-menu-item {
            padding: var(--spacing-sm) var(--spacing-md);
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .user-menu-item:hover {
            background: rgba(94, 234, 212, 0.1);
            color: var(--accent);
        }
        
        /* 内容区域 */
        .content-container {
            max-width: 1200px;
            margin: var(--spacing-xl) auto;
            padding: 0 var(--spacing-xl);
        }
        
        .page-title {
            font-size: 1.8rem;
            margin-bottom: var(--spacing-xl);
            color: var(--text-primary);
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
        }
        
        .page-title::after {
            content: '';
            flex-grow: 1;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--accent), transparent);
            margin-left: var(--spacing-md);
            opacity: 0.5;
        }
        
        .profile-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--spacing-xl);
        }
        
        @media (max-width: 900px) {
            .profile-container {
                grid-template-columns: 1fr;
            }
        }
        
        /* 个人信息卡片 */
        .profile-card {
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-xl);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }
        
        .profile-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--accent), transparent);
            opacity: 0.7;
        }
        
        .avatar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: var(--spacing-xl);
        }
        
        .avatar-large {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: var(--spacing-md);
            background: var(--secondary-bg);
            border: 3px solid var(--border-color);
            overflow: hidden;
        }
        
        .avatar-large img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatar-change {
            color: var(--accent);
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        .info-title {
            font-size: 1rem;
            color: var(--text-tertiary);
            margin-bottom: var(--spacing-sm);
        }
        
        .info-value {
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-bottom: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: var(--spacing-md);
        }
        
        .divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--border-color), transparent);
            margin: var(--spacing-lg) 0;
        }
        
        /* 操作按钮 */
        .profile-actions {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-sm) var(--spacing-md);
            border-radius: var(--radius-sm);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            font-family: var(--font-main);
            text-align: center;
            gap: var(--spacing-sm);
        }
        
        .btn-primary {
            background: rgba(94, 234, 212, 0.2);
            color: var(--text-primary);
            border: 1px solid rgba(94, 234, 212, 0.4);
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        
        .btn-primary:hover {
            background: rgba(94, 234, 212, 0.3);
            box-shadow: 0 0 8px rgba(94, 234, 212, 0.3);
        }
        
        .btn-secondary {
            background: rgba(148, 163, 184, 0.15);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            background: rgba(148, 163, 184, 0.25);
            color: #ffffff;
        }
        
        /* 模态框 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-overlay.active {
            display: flex;
        }
        
        .modal {
            background: var(--card-bg);
            border-radius: var(--radius-md);
            padding: var(--spacing-xl);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--border-color);
            width: 100%;
            max-width: 500px;
            position: relative;
        }
        
        .modal-close {
            position: absolute;
            top: var(--spacing-md);
            right: var(--spacing-md);
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 1.5rem;
        }
        
        .modal-close:hover {
            color: var(--accent);
        }
        
        .modal-title {
            font-size: 1.5rem;
            margin-bottom: var(--spacing-lg);
            color: var(--accent);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }
        
        .form-group {
            margin-bottom: var(--spacing-lg);
        }
        
        .form-group label {
            display: block;
            margin-bottom: var(--spacing-sm);
            color: var(--text-tertiary);
        }
        
        .form-input {
            width: 100%;
            padding: var(--spacing-md);
            background: rgba(26, 36, 53, 0.7);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-family: var(--font-main);
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.1);
        }
        
        .password-container {
            position: relative;
        }
        
        .toggle-password {
            position: absolute;
            right: var(--spacing-md);
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            cursor: pointer;
        }
        
        .toggle-password:hover {
            color: var(--accent);
        }
        
        .password-strength {
            margin-top: var(--spacing-sm);
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .strength-meter {
            height: 100%;
            background: var(--accent);
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .validation-message {
            margin-top: var(--spacing-sm);
            font-size: 0.9rem;
            color: var(--text-tertiary);
        }
        
        .btn-submit {
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: 1rem;
            width: 100%;
            margin-top: var(--spacing-md);
        }
        
        .form-actions {
            display: flex;
            gap: var(--spacing-md);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: var(--spacing-sm);
                padding: var(--spacing-md);
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                margin: var(--spacing-md) 0;
            }
            
            .page-title {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--spacing-md);
            }
            
            .page-title::after {
                display: none;
            }
            
            .content-container {
                padding: var(--spacing-md);
            }
            
            .profile-card {
                padding: var(--spacing-lg);
            }
        }
    </style>
</head>
<body>
    <div class="tech-pattern"></div>
    <div class="flow-lines" id="flowLines"></div>
    
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">
            <div class="logo-icon">
                <i class="fas fa-bolt"></i>
            </div>
            <div class="logo-text">冷端优化系统</div>
        </div>
        
        <div class="nav-links">
            <div class="nav-item">
                <a href="dashboard.html" class="nav-link">
                    <i class="fas fa-tachometer-alt"></i> 驾驶舱
                </a>
            </div>
            
            <div class="nav-item">
                <a href="#" class="nav-link">
                    <i class="fas fa-cogs"></i> 核心功能 <i class="fas fa-chevron-down"></i>
                </a>
                <div class="nav-submenu">
                    <a href="#"><i class="fas fa-tachometer-alt"></i> 背压分析</a>
                    <a href="#"><i class="fas fa-wind"></i> 清洁分析</a>
                    <a href="#"><i class="fas fa-snowflake"></i> 冬季防冻</a>
                </div>
            </div>
            
            <div class="nav-item">
                <a href="#" class="nav-link">
                    <i class="fas fa-brain"></i> AI智能分析 <i class="fas fa-chevron-down"></i>
                </a>
                <div class="nav-submenu">
                    <a href="#"><i class="fas fa-comments"></i> 对话式分析</a>
                    <a href="#"><i class="fas fa-search"></i> 检索式分析</a>
                </div>
            </div>
            
            <div class="nav-item">
                <a href="#" class="nav-link">
                    <i class="fas fa-file-alt"></i> 报表
                </a>
            </div>
        </div>
        
        <div class="user-profile" id="userProfile">
            <div class="user-avatar">
                <span>U</span>
            </div>
            <div class="user-name">张工</div>
            <div class="user-menu" id="userMenu">
                <div class="user-menu-item">
                    <i class="fas fa-user-circle"></i> 个人中心
                </div>
                <div class="user-menu-item" id="changePasswordBtn">
                    <i class="fas fa-key"></i> 修改密码
                </div>
                <div class="user-menu-item">
                    <i class="fas fa-cog"></i> 设置
                </div>
                <div class="user-menu-item">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 内容区域 -->
    <div class="content-container">
        <h1 class="page-title">
            <i class="fas fa-user-circle"></i> 个人信息中心
        </h1>
        
        <div class="profile-container">
            <!-- 个人信息卡片 -->
            <div class="profile-card">
                <div class="avatar-container">
                    <div class="avatar-large">
                        <span>U</span>
                    </div>
                    <span class="avatar-change">更换头像</span>
                </div>
                
                <div class="profile-info">
                    <div class="info-title">用户名</div>
                    <div class="info-value">张三</div>
                    
                    <div class="info-title">用户ID</div>
                    <div class="info-value">USER001</div>
                    
                    <div class="info-title">部门</div>
                    <div class="info-value">技术支持部</div>
                    
                    <div class="info-title">岗位</div>
                    <div class="info-value">高级运维工程师</div>
                    
                    <div class="divider"></div>
                    
                    <div class="info-title">手机号</div>
                    <div class="info-value">138****5678</div>
                    
                    <div class="info-title">邮箱</div>
                    <div class="info-value">zhangsan@example.com</div>
                    
                    <div class="info-title">角色</div>
                    <div class="info-value">系统管理员</div>
                    
                    <div class="info-title">注册时间</div>
                    <div class="info-value">2022-03-15</div>
                </div>
                
                <div class="divider"></div>
                
                <div class="profile-actions">
                    <button class="btn btn-primary" id="editProfileBtn">
                        <i class="fas fa-edit"></i> 编辑个人信息
                    </button>
                </div>
            </div>
            
            <!-- 右侧占位区域 -->
            <div>
                <!-- 未来可扩展区域 -->
                <div class="profile-card">
                    <h2 style="margin-bottom: var(--spacing-lg);">账户活动</h2>
                    <p style="color: var(--text-tertiary);">最近暂无重要活动记录</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 修改密码模态框 -->
    <div class="modal-overlay" id="passwordModal">
        <div class="modal">
            <div class="modal-close" id="closeModal">&times;</div>
            <h2 class="modal-title"><i class="fas fa-key"></i> 修改密码</h2>
            
            <form id="passwordForm">
                <div class="form-group">
                    <label for="currentPassword">原密码</label>
                    <div class="password-container">
                        <input type="password" id="currentPassword" class="form-input" required>
                        <i class="far fa-eye toggle-password" id="toggleCurrentPassword"></i>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="newPassword">新密码</label>
                    <div class="password-container">
                        <input type="password" id="newPassword" class="form-input" required minlength="8">
                        <i class="far fa-eye toggle-password" id="toggleNewPassword"></i>
                    </div>
                    <div class="password-strength">
                        <div class="strength-meter" id="strengthMeter"></div>
                    </div>
                    <div class="validation-message" id="passwordMessage">
                        密码需包含8位以上，包含大小写字母、数字和特殊字符
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">确认新密码</label>
                    <div class="password-container">
                        <input type="password" id="confirmPassword" class="form-input" required>
                        <i class="far fa-eye toggle-password" id="toggleConfirmPassword"></i>
                    </div>
                    <div class="validation-message" id="confirmMessage"></div>
                </div>
                
                <div class="form-actions">
                    <button type="button" class="btn btn-secondary" id="cancelPassword">取消</button>
                    <button type="submit" class="btn btn-primary btn-submit">确认修改</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 创建流动线条背景
            function createFlowLines() {
                const container = document.getElementById('flowLines');
                const linesCount = 20;
                
                for (let i = 0; i < linesCount; i++) {
                    const line = document.createElement('div');
                    line.classList.add('flow-line');
                    line.style.top = `${Math.random() * 100}%`;
                    line.style.width = `${20 + Math.random() * 40}%`;
                    line.style.opacity = 0.05 + Math.random() * 0.1;
                    line.style.animationDuration = `${10 + Math.random() * 20}s`;
                    line.style.animationDelay = `-${Math.random() * 15}s`;
                    container.appendChild(line);
                }
            }
            
            createFlowLines();
            
            // 用户菜单交互
            const userProfile = document.getElementById('userProfile');
            const userMenu = document.getElementById('userMenu');
            
            userProfile.addEventListener('click', function(e) {
                e.stopPropagation();
                userMenu.classList.toggle('active');
            });
            
            document.addEventListener('click', function(e) {
                if (!userProfile.contains(e.target)) {
                    userMenu.classList.remove('active');
                }
            });
            
            // 修改密码按钮
            const changePasswordBtn = document.getElementById('changePasswordBtn');
            const passwordModal = document.getElementById('passwordModal');
            const closeModal = document.getElementById('closeModal');
            const cancelPassword = document.getElementById('cancelPassword');
            
            changePasswordBtn.addEventListener('click', function() {
                passwordModal.classList.add('active');
                userMenu.classList.remove('active');
            });
            
            closeModal.addEventListener('click', function() {
                passwordModal.classList.remove('active');
            });
            
            cancelPassword.addEventListener('click', function() {
                passwordModal.classList.remove('active');
            });
            
            passwordModal.addEventListener('click', function(e) {
                if (e.target === passwordModal) {
                    passwordModal.classList.remove('active');
                }
            });
            
            // 密码显示/隐藏切换
            function setupPasswordToggle(inputId, toggleId) {
                const input = document.getElementById(inputId);
                const toggle = document.getElementById(toggleId);
                
                toggle.addEventListener('click', function() {
                    if (input.type === 'password') {
                        input.type = 'text';
                        toggle.classList.remove('fa-eye');
                        toggle.classList.add('fa-eye-slash');
                    } else {
                        input.type = 'password';
                        toggle.classList.remove('fa-eye-slash');
                        toggle.classList.add('fa-eye');
                    }
                });
            }
            
            setupPasswordToggle('currentPassword', 'toggleCurrentPassword');
            setupPasswordToggle('newPassword', 'toggleNewPassword');
            setupPasswordToggle('confirmPassword', 'toggleConfirmPassword');
            
            // 密码强度检测
            const newPasswordInput = document.getElementById('newPassword');
            const strengthMeter = document.getElementById('strengthMeter');
            const passwordMessage = document.getElementById('passwordMessage');
            const confirmPasswordInput = document.getElementById('confirmPassword');
            const confirmMessage = document.getElementById('confirmMessage');
            
            newPasswordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                
                // 长度检查
                if (password.length >= 8) strength += 1;
                
                // 包含小写字母
                if (/[a-z]/.test(password)) strength += 1;
                
                // 包含大写字母
                if (/[A-Z]/.test(password)) strength += 1;
                
                // 包含数字
                if (/\d/.test(password)) strength += 1;
                
                // 包含特殊字符
                if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
                
                // 设置强度指示器
                const width = (strength / 5) * 100;
                strengthMeter.style.width = `${width}%`;
                
                // 设置颜色和消息
                if (password.length === 0) {
                    passwordMessage.textContent = '密码需包含8位以上，包含大小写字母、数字和特殊字符';
                    passwordMessage.style.color = '';
                    strengthMeter.style.background = '';
                } else {
                    if (strength <= 2) {
                        strengthMeter.style.background = 'var(--error)';
                        passwordMessage.textContent = '密码强度弱，请使用更复杂的组合';
                        passwordMessage.style.color = 'var(--error)';
                    } else if (strength <= 4) {
                        strengthMeter.style.background = '#fbbf24';
                        passwordMessage.textContent = '密码强度中等，可以进一步加强';
                        passwordMessage.style.color = '#fbbf24';
                    } else {
                        strengthMeter.style.background = 'var(--success)';
                        passwordMessage.textContent = '密码强度强，安全可靠';
                        passwordMessage.style.color = 'var(--success)';
                    }
                }
            });
            
            // 确认密码检查
            confirmPasswordInput.addEventListener('input', function() {
                if (this.value !== newPasswordInput.value) {
                    confirmMessage.textContent = '两次输入的密码不一致';
                    confirmMessage.style.color = 'var(--error)';
                } else {
                    confirmMessage.textContent = '';
                }
            });
            
            // 密码表单提交
            const passwordForm = document.getElementById('passwordForm');
            
            passwordForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const currentPassword = document.getElementById('currentPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                
                // 简单验证
                if (newPassword !== confirmPassword) {
                    alert('两次输入的密码不一致，请重新确认');
                    return;
                }
                
                if (newPassword.length < 8) {
                    alert('密码长度至少为8位');
                    return;
                }
                
                // 此处应发送AJAX请求到服务器修改密码
                alert('密码修改成功！');
                
                // 关闭模态框并重置表单
                passwordModal.classList.remove('active');
                passwordForm.reset();
                strengthMeter.style.width = '0%';
                passwordMessage.textContent = '密码需包含8位以上，包含大小写字母、数字和特殊字符';
                passwordMessage.style.color = '';
                confirmMessage.textContent = '';
            });
        });
    </script>
</body>
</html>